<template>
  <view>
    <image
      class="image"
      :src="'https://mini.jiaw.com/img/5786720211206.jpg'"
      mode="widthFix"
    ></image>
    <view class="contents">
      <div class="title">3月新会员专享 首单立减100元</div>
      <ul>
        <li>
          2022年3月19日-2022年3月31日，首次注册家饰佳微信小程序，即可领取100元首单立减券，至家饰佳参加活动的商户使用线上支付消费，满1000立减100，优惠名额150名，先到先得，领完即止。
        </li>
      </ul>
    </view>
    <div class="footer">
      <get-user-info
        style="width:35%;margin-right: 40rpx;"
        :btn-class="'receive'"
        @checks="getCoupon"
      >
        <slot>领 取</slot>
      </get-user-info>
      <button class="btn cancel" @click="back">取 消</button>
    </div>
  </view>
</template>

<script>
import { newMemberCoupon } from '@/api'
import mixins from '@/mixins'
import getUserInfo from '@/components/get-user-info'

export default {
  components: {
    getUserInfo
  },
  mixins: [mixins],

  methods: {
    getCoupon() {
      const { id, phone } = this.userInfo
      newMemberCoupon(id, phone).then(res => {
        uni.showToast({
          title: res.resMsg,
          duration: 1000,
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/home/index'
          })
        }, 1000)
      })
    },
    checks() {
      this.getCoupon()
    },
    back() {
      uni.navigateTo({
        url: '/pages/home/index'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.contents {
  padding: 0 20rpx 20rpx;
  .title {
    font-size: 32rpx;
    font-weight: 900;
  }
  ul {
    li {
      line-height: 46rpx;
    }
  }
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
  .btn {
    width: 35%;
    padding: 4rpx 0;
    font-size: 30rpx;
    border-radius: 20rpx;
  }
  .cancel {
    margin-left: 40rpx;
    background: rgb(231, 231, 231);
    color: #000;
  }
}
</style>
